<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="550"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Diagram parameters
        const cx = canvas.width / 2;
        const cy = canvas.height / 2 - 20; // Shift up slightly for caption
        const radius = 180;

        // Helper function to draw a crossed circle (⊗ symbol)
        function drawCrossedCircle(x, y, r) {
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(x - r / Math.sqrt(2), y - r / Math.sqrt(2));
            ctx.lineTo(x + r / Math.sqrt(2), y + r / Math.sqrt(2));
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(x + r / Math.sqrt(2), y - r / Math.sqrt(2));
            ctx.lineTo(x - r / Math.sqrt(2), y + r / Math.sqrt(2));
            ctx.stroke();
        }

        // 1. Draw the main circle
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Define and draw the inscribed equilateral triangle
        const angleA = -Math.PI / 2; // 270 degrees
        const angleB = Math.PI / 6;   // 30 degrees
        const angleC = 5 * Math.PI / 6; // 150 degrees

        const Ax = cx + radius * Math.cos(angleA);
        const Ay = cy + radius * Math.sin(angleA);
        const Bx = cx + radius * Math.cos(angleB);
        const By = cy + radius * Math.sin(angleB);
        const Cx = cx + radius * Math.cos(angleC);
        const Cy = cy + radius * Math.sin(angleC);

        ctx.beginPath();
        ctx.moveTo(Ax, Ay);
        ctx.lineTo(Bx, By);
        ctx.lineTo(Cx, Cy);
        ctx.closePath();
        ctx.stroke();

        // 3. Add labels for vertices
        ctx.font = '28px Arial';
        ctx.fillText('A', Ax, Ay - 20);
        ctx.fillText('B', Bx + 20, By + 10);
        ctx.fillText('C', Cx - 20, Cy + 10);

        // 4. Add resistance labels
        ctx.font = 'italic 24px Arial';
        // 2r₂ on side BC
        ctx.fillText('2', cx - 12, By - 20);
        ctx.fillText('r', cx, By - 20);
        ctx.font = 'italic 16px Arial';
        ctx.fillText('2', cx + 8, By - 15);
        
        // r₁ on the arcs
        ctx.font = 'italic 24px Arial';
        const r1_offset = 35;
        // Arc AB
        const midAngleAB = (angleA + angleB + 2*Math.PI) / 2; // Adjust for wrap around
        ctx.fillText('r', cx + (radius + r1_offset) * Math.cos(-Math.PI/6), cy + (radius + r1_offset) * Math.sin(-Math.PI/6) + 10);
        ctx.font = 'italic 16px Arial';
        ctx.fillText('1', cx + (radius + r1_offset) * Math.cos(-Math.PI/6) + 8, cy + (radius + r1_offset) * Math.sin(-Math.PI/6) + 15);

        // Arc AC
        ctx.font = 'italic 24px Arial';
        const midAngleAC = (angleA + angleC) / 2;
        ctx.fillText('r', cx + (radius + r1_offset) * Math.cos(midAngleAC), cy + (radius + r1_offset) * Math.sin(midAngleAC) + 10);
        ctx.font = 'italic 16px Arial';
        ctx.fillText('1', cx + (radius + r1_offset) * Math.cos(midAngleAC) + 8, cy + (radius + r1_offset) * Math.sin(midAngleAC) + 15);
        
        // Arc BC
        ctx.font = 'italic 24px Arial';
        ctx.fillText('r', cx, cy + radius + r1_offset);
        ctx.font = 'italic 16px Arial';
        ctx.fillText('1', cx + 8, cy + radius + r1_offset + 5);


        // 5. Add magnetic field symbols
        // Central ⊗ B
        drawCrossedCircle(cx, cy, 20);
        ctx.font = 'bold 30px Arial';
        ctx.fillText('B', cx + 35, cy + 5);

        // Smaller ⊗ symbols with r₂ labels
        const small_r = 12;
        
        // Left symbol
        const sym_left_x = cx - radius * 0.45;
        const sym_left_y = cy - radius * 0.1;
        drawCrossedCircle(sym_left_x, sym_left_y, small_r);
        ctx.font = 'italic 24px Arial';
        ctx.fillText('r', sym_left_x + 25, sym_left_y);
        ctx.font = 'italic 16px Arial';
        ctx.fillText('2', sym_left_x + 33, sym_left_y + 5);

        // Right symbol
        const sym_right_x = cx + radius * 0.45;
        const sym_right_y = cy - radius * 0.1;
        drawCrossedCircle(sym_right_x, sym_right_y, small_r);
        ctx.font = 'italic 24px Arial';
        ctx.fillText('r', sym_right_x + 25, sym_right_y);
        ctx.font = 'italic 16px Arial';
        ctx.fillText('2', sym_right_x + 33, sym_right_y + 5);
        
        // Bottom symbol
        const sym_bottom_x = cx;
        const sym_bottom_y = cy + radius * 0.75;
        drawCrossedCircle(sym_bottom_x, sym_bottom_y, small_r);

        // 6. Add the caption
        ctx.font = '30px "KaiTi", "SimSun", sans-serif';
        ctx.fillText('电图 3.12.1', cx, canvas.height - 25);

    </script>
</body>
</html>